<template>
	<div class='dash-board full word-cannot-selected'>
		<statistic-info-card :style="'width:' + (100 / statisticInfo.length) + '%'" v-for="(item, index) in statisticInfo" :key="index" :info="item"></statistic-info-card>
		<div class="chart-box">
			<so-chart :option="option"></so-chart>
		</div>
		<div class="chart-box">
			<so-chart :option="option"></so-chart>
		</div>
		<div class="todo-box">
			<div class="full todo-table">
				<div class="title-row"><i class="icon-ios-checkbox-outline"></i>TODO List</div>
				<div class="content">
					<el-table class="todo-content" v-loading="loading.table" height="100%" :data="todoList" tooltip-effect="light">
						<el-table-column type="index" width="60" align="left"></el-table-column>
						<el-table-column label="任务事项" prop="task" align="left"></el-table-column>
						<el-table-column label="计划完成时间" prop="time" align="center"></el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<div class="last-edit-box">
			<div class="full last-edit-panel word-cannot-selected">
				<div class="title-row"><i class="icon-ios-laptop" style="color: darkviolet"></i>最近在写</div>
				<div class="content">
					<div class="info-row title">{{lastEdit.title}}</div>
					<div class="info-row num-font">{{lastEdit.time}}</div>
					<div class="info-row cn-font summary">{{lastEdit.summary}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import echarts from 'echarts/lib/echarts';
import SoChart from '../../../../components/base/SoChart';
import StatisticInfoCard from '../../../../components/layout/StatisticInfoCard';

export default {
	name: 'DashBoard',
	components: {
		SoChart,
		StatisticInfoCard
	},
	data () {
		return {
			option: {},
			loading: {
				table: false
			},
			lastEdit: {
				title: '杂技',
				time: '2019-10-10 19:12',
				summary:
					'功能：专栏展示、TODO计划栏、恢复文章编写（文章历史纪录）、文章提交日统计（柱状）图、访问量统计（折线）图、标签展示（饼状）图、访问数、文章总数、转发数、评论数、关注数功能：专栏展示、TODO计划栏、恢复文章编写（文章历史纪录）、文章提交日统计（柱状）图、访问量统计（折线）图、标签展示（饼状）图、访问数、文章总数、转发数、评论数、关注数'
			},
			statisticInfo: [
				{
					label: '文章',
					value: '86',
					icon: 'icon-ios-paper'
				},
				{
					label: '访问',
					value: '2181',
					icon: 'icon-ios-podium'
				},
				{
					label: '评论',
					value: '621',
					icon: 'icon-ios-quote'
				},
				{
					label: '关注',
					value: '921',
					icon: 'icon-ios-eye'
				}
			],
			todoList: [
				{
					task: '完成日志',
					time: '2019-10-12'
				},
				{
					task: '写小说',
					time: '2019-10-15'
				},
				{
					task: '开发系统',
					time: '2019-12-12'
				}
			]
		};
	},
	mounted () {
		this.option = this.getOption();
	},
	methods: {
		getOption () {
			return {
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					top: '25%',
					left: '0',
					bottom: '0%',
					right: '0%'
				},
				xAxis: {
					show: false,
					type: 'category',
					boundaryGap: false,
					data: [
						'06-04',
						'06-05',
						'06-05',
						'06-07',
						'06-08',
						'06-09',
						'06-10'
					],
					axisLabel: {
						rotate: 20,
						interval: 0,
						formatter: value => {
							return value.length > 6
								? value.slice(0, 6) + '...'
								: value;
						}
					}
				},
				yAxis: {
					show: false,
					splitLine: {
						show: false
					},
					type: 'value'
				},
				series: {
					name: '访问数',
					type: 'line',
					smooth: true,
					showSymbol: false,
					lineStyle: {
						width: 1
					},
					areaStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: '#369aff'
							},
							{
								offset: 1,
								color: '#ececff'
							}
						])
					},
					data: [270, 412, 300, 334, 390, 330, 220]
				}
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.dash-board {
	text-align: center;
	padding: 10px;
	overflow: auto;

	.chart-box,
	.todo-box,
	.last-edit-box {
		height: 280px;
		float: left;
		width: 25%;
		padding: 10px;

		.title-row {
			height: 30px;
			font-weight: 800;
			font-size: 18px;
			text-align: left;
			color: #155ba2;

			i {
				font-size: 26px;
				padding-right: 10px;
				font-weight: 100;
				color: chocolate;
			}
		}

		.content {
			height: calc(100% - 30px);
		}
	}
	.last-edit-box {
		.last-edit-panel {
			background: #ececff;
			border-radius: 5px;

			.title-row {
				height: 50px;
				padding: 10px 20px 0;
			}

			.content {
				cursor: pointer;
				background: #e5deff;
				height: calc(100% - 50px);
				padding: 0 20px;
				border-radius: 20px 20px 0 0;
				transition: all 0.2s ease;
				&:hover {
					background: #e5deff88;
				}
			}

			.info-row {
				font-size: 14px;
				text-align: left;
				height: 40px;
				line-height: 40px;
				color: #d2691e;

				&.title {
					height: 50px;
					padding-top: 10px;
					font-size: 20px;
					font-weight: bold;
					color: #1b1919;
				}

				&.summary {
					padding-top: 5px;
					color: #6b6b6b;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 5;
					overflow: hidden;
					height: unset;
					line-height: 20px;
				}
			}
		}
	}
	.todo-box {
		.todo-table {
			background: #ececff;
			border-radius: 5px;
			padding: 10px 20px;
		}
	}
	.chart-box {
		.so-chart {
			background: #ececff;
			border-radius: 5px;
		}
	}
}
</style>
